<template>
      <el-aside :width="main.isCollapse ? '180px' : '64px' ">
    <el-menu :collapse-transition="false" :collapse="!main.isCollapse" active-text-color="rgb(248, 152.1, 152.1)" :default-active="$route.name" class="el-menu-vertical-demo" background-color="#606266" text-color="#fff">
        <h3 v-show="main.isCollapse">VUE后台</h3>
        <h3 v-show="!main.isCollapse">VUE</h3>
        <el-menu-item @click="clickMenu(item)" v-for="item in onChildren()" :key="item.path" :index="item.name">
            <!-- <el-icon><icon-menu /></el-icon> -->
            <el-icon>
                <component class="icons" :is="item.icon"></component>
            </el-icon>
            <span>{{ item.label }}</span>
        </el-menu-item>


        <el-sub-menu v-for="item in hasChildren()" :key="item.label" :index="item.name">
            <template #title>
                <el-icon>
                    <component class="icons" :is="item.icon"></component>
                </el-icon>
                <span>{{ item.label }}</span>
            </template>

            <el-menu-item-group>
                <el-menu-item @click="clickMenu(subItem)" v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.name">
                    <el-icon>
                        <component class="icons" :is="subItem.icon"></component>
                    </el-icon>
                    <span>{{ subItem.label }}</span>
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
    </el-menu>
         </el-aside>
</template>



<script setup>
// 引入仓库
import {useAside} from '../store/index.js'
const main = useAside()

// 引入router
import {useRouter} from 'vue-router'
const router= useRouter()

const list = [
    {
        path: "/",
        name: "home",
        label: "首页",
        icon: "House",
        url: "Home/Home",
    },
    {
        path: "/user",
        name: "user",
        label: "用户管理",
        icon: "User",
        url: "User/User",
    },
    {
        label: "其他",
        icon: "Location",
        path: "/other",
        name: 'other',
        children: [
            {
                path: "/page1",
                name: "page1",
                label: "页面1",
                icon: "Tools",
                url: "other/PageOne",
            },
            {
                path: "/page2",
                name: "page2",
                label: "页面2",
                icon: "Tools",
                url: "other/PageTwo",
            },
        ],
    },
];

const onChildren = () => {
    return list.filter((item) => !item.children)
}

const hasChildren = () => {
    return list.filter((item) => item.children)
}

// 点击侧边栏跳转
const clickMenu=(item)=>{
    router.push({name:item.name})
    // 更新面包屑数据
    main.selectMenu(item)
    console.log(item);
}

</script>


<style lang="less">
.el-menu-vertical-demo{
    height: 100%;
    h3{
        font-weight: 700;
        line-height: 48px;
        color: #fff;
        text-align: center;
    }
}

</style>